<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<!-- 移动设备优先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
	 <!--  	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> -->
		<!-- 样式初始化 -->
		<link rel="stylesheet" href="css/cssreset.css">
		<!-- bootstrap CSS -->
		<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
		<!-- fontawsome CSS -->
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
		<!-- index背景移动 CSS -->
		<link rel="stylesheet" href="css/move_bg.css">
		<!-- 纵向时间轴 CSS -->
		<link rel="stylesheet" href="css/time_v.css">
		<link rel="stylesheet" href="css/main.css">
		<!-- 当前页面 CSS -->
		<link rel="stylesheet" href="css/index.css">
		<!-- 动画库 CSS -->
		<link rel="stylesheet" href="css/animate.min.css">
		<!-- swiper CSS -->
		<link rel="stylesheet" href="css/swiper.min.css">
	</head>
	<body>
		<!-- 个人介绍 -->
		<section id="index">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-12">
					<!-- 右上角的版本切换 -->
					<div class="change pull-right">
						<span>View in English</span>
						<i class="fa fa-exchange" aria-hidden="true"></i>
					</div>
			        <div id="indexgs"> <img id="indexg2" src="images/g3.png" width="364" height="308"/>
			            <div id="indexg0"> 
			                <img src="images/g1.png" width="918" height="508"/> 
			                <a href="#" target="_blank"></a> 
			            </div>
			            <div id="indexg1"> 
			                <img src="images/g2.png" width="353" height="538"/> 
			                <a href="#" target="_blank"></a> 
			            </div>
			        </div>
				</div>
			</div>
		</div>
			
		</section>
		<!-- 成长历程 -->
		<section id="experience">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12 con">
						<div class="col-sm-4 my_time">
							<div id="timeline">
								<ul id="dates">
									<li>
										<a href="#">出生</a>
										<div class="do">
											<div class="pointer"></div>
											<!-- <span>1997年，在湛江的一个小县城里，我出生了</span> -->
											<span>bootstrap、Vue.js、Node.js、react</span>
										</div>
									</li>
									<li>
										<a href="#">11岁</a>
										<div class="do">
											<div class="pointer"></div>
											<!-- <span>开始接触古筝，从此成为我生活中的重要部分</span> --><span>bootstrap、Vue.js、Node.js、react</span>
										</div>
									</li>
									<li>
										<a href="#">15岁</a>
										<div class="do">
											<div class="pointer"></div>
											<!-- <span>学习古典舞，较弱的身躯更加坚韧挺拔</span> -->
											<span>bootstrap、Vue.js、Node.js、react</span>
										</div>
									</li>
									<li>
										<a href="#">18岁</a>
										<div class="do">
											<div class="pointer"></div>
											<!-- <span>开始我的编程人生，学习C语言，java编程</span> -->
											<span>bootstrap、Vue.js、Node.js、react</span>
										</div>
									</li>
									<li>
										<a href="#">20岁</a>
										<div class="do">
											<div class="pointer"></div>
											<!-- <span>潜心研究前端技术，html+css+js、jQuery</span> -->
											<span>bootstrap、Vue.js、Node.js、react</span>
										</div>
									</li>
									<li>
										<a href="#">22岁</a>
										<div class="do">
											<div class="pointer"></div>
											<span>bootstrap、Vue.js、Node.js、react</span>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="col-sm-6 exp_right">
							<div class="aboutme">
								<h3 class="text-center">因为热爱，所以选择</h3>
								<br>
								<p>在这信息化时代我选择了有极大挑战性的IT领域，始于热爱，陷于热爱忠于热爱。在这信息化时代，我选择了有极大挑战性的IT领域，始于热爱，陷于热爱，在这信息化时代，我选择了有极大挑战性的IT领域始于热爱，陷于热爱，忠于热爱在这信息化始于热爱陷于热爱忠于热爱。在这信息化时代我选择了</p>
								<p>在这信息化时代我选择了有极大挑战性的IT领域，始于热爱，陷于热爱忠于热爱。在这信息化时代，我选择了有极大挑战性的IT领域，始于热爱，陷于热爱，在这信息化时代，我选择了有极大挑战性的IT领域始于热爱，陷于热爱，忠于热爱在这信息化始于热爱陷于热爱忠于热爱。在这信息化时代我选择了</p>

							</div>
						</div>
							
					</div>
				</div>
			</div>
		</section>
		<!-- 项目经验 -->
        <section id="portfolio">
        	<div class="container">
        		<div class="space"></div>
        		<h3 class="text-center">项目经验</h3>
        		<div class="space"></div>
        		<div class="sapce"></div>
        		<div class="row">
        			<div class="col-xs-12">
        				<div class="filter text-center">
        					<ul class="nav nav-pills">
							  <li class="active"><a href="#" data-filter="*">所有</a></li>
							  <li><a href="#" data-filter=".web-design">网页设计</a></li>
							  <li><a href="#" data-filter=".app-develop">应用开发</a></li>
							  <li><a href="#" data-filter=".site-build">站点构建</a></li>
							</ul>
        				</div>
        				<div class="space"></div>
        				<div class="isotope-container row myitem">
        					<div class="col-sm-6 col-md-3 web-design" >
        						<div>
        							<div class="overlay-container ">
        								<img width="100%" height="190px" src="images/sm1.jpg"/>
        								<a href="" class="overlay" data-toggle="modal" data-target="#project-1">
        									<i class="fa fa-search-plus"></i>
        									<span>网页设计</span>
        								</a>
        							</div>

        							<a href="#" class="btn btn-default btn-block" data-toggle="modal" data-target="#project-1">网页设计</a>
        						</div>
        						<div>
									<div class="modal fade" tabindex="-1" role="dialog" id="project-1">
									  <div class="modal-dialog modal-lg" role="document">
									    <div class="modal-content" >
									      <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									        <h4 class="modal-title">网页设计</h4>
									      </div>
									      <div class="modal-body">
									        <h3>课程简介</h3>
									        <div class="row">
									        	<div class="col-md-6">
									        		<p>网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。</p>
									        	</div>
									        	<div class="col-md-6">
									        		<img src="images/sm1.jpg" alt="" width="100%" height="100%" />
									        	</div>
									        </div>
									      </div>
									      <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									      </div>
									    </div><!-- /.modal-content -->
									  </div><!-- /.modal-dialog -->
									</div><!-- /.modal -->
        						</div>
        					</div>
        					<div class="col-sm-6 col-md-3 app-develop" >
        						<div>
        							<div class="overlay-container">
        								<img width="100%" height="190px" src="images/sm2.jpg"/>
        								<a href="" class="overlay" data-toggle="modal" data-target="#project-2">
        									<i class="fa fa-search-plus"></i>
        									<span>应用开发</span>
        								</a>
        							</div>

        							<a href="#" class="btn btn-default btn-block" data-toggle="modal" data-target="#project-2">应用开发</a>
        						</div>
        						<div>
									<div class="modal fade" tabindex="-1" role="dialog" id="project-2">
									  <div class="modal-dialog modal-lg" role="document">
									    <div class="modal-content" >
									      <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									        <h4 class="modal-title">应用开发</h4>
									      </div>
									      <div class="modal-body">
									        <h3>课程简介</h3>
									        <div class="row">
									        	<div class="col-md-6">
									        		<p>应用软件开发是指使用程序语言C#、 java 、 c++、vb等高级语言编写，主要是用于商业、生活应用的软件的开发。
应用软件它可以拓宽计算机系统的应用领域，放大硬件的功能。其开发应用软件是为满足用户不同领域、不同问题的应用需求而提供的那部分软件。</p>
									        	</div>
									        	<div class="col-md-6">
									        		<img src="images/sm2.jpg" alt="" width="100%" height="100%" />
									        	</div>
									        </div>
									      </div>
									      <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									      </div>
									    </div><!-- /.modal-content -->
									  </div><!-- /.modal-dialog -->
									</div><!-- /.modal -->
        						</div>
        					</div>
        					<div class="col-sm-6 col-md-3 site-build" >
        						<div>
        							<div class="overlay-container">
        								<img width="100%" height="190px" src="images/sm3.jpg"/>
        								<a href="" class="overlay"  data-toggle="modal" data-target="#project-3">
        									<i class="fa fa-search-plus"></i>
        									<span>站点构建</span>
        								</a>
        							</div>

        							<a href="#" class="btn btn-default btn-block" data-toggle="modal" data-target="#project-3">站点构建</a>
        						</div>
        						<div>
									<div class="modal fade" tabindex="-1" role="dialog" id="project-3">
									  <div class="modal-dialog modal-lg" role="document">
									    <div class="modal-content" >
									      <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									        <h4 class="modal-title">站点构建</h4>
									      </div>
									      <div class="modal-body">
									        <h3>课程简介</h3>
									        <div class="row">
									        	<div class="col-md-6">
									        		<p>网站即网络站点的简称。是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。</p>

									        	</div>
									        	<div class="col-md-6">
									        		<img src="images/sm3.jpg" alt="" width="100%" height="100%" />
									        	</div>
									        </div>
									      </div>
									      <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									      </div>
									    </div><!-- /.modal-content -->
									  </div><!-- /.modal-dialog -->
									</div><!-- /.modal -->
        						</div>
        					</div>
        					<div class="col-sm-6 col-md-3 web-design" >
        						<div>
        							<div class="overlay-container">
        								<img width="100%" height="190px" src="images/sm4.jpg"/>
        								<a href="" class="overlay"  data-toggle="modal" data-target="#project-4">
        									<i class="fa fa-search-plus"></i>
        									<span>网页设计（二）</span>
        								</a>
        							</div>

        							<a href="#" class="btn btn-default btn-block">网页设计（二）</a>
        						</div>
        						<div>
									<div class="modal fade" tabindex="-1" role="dialog" id="project-4">
									  <div class="modal-dialog modal-lg" role="document">
									    <div class="modal-content" >
									      <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									        <h4 class="modal-title">网页设计（二）</h4>
									      </div>
									      <div class="modal-body">
									        <h3>课程简介</h3>
									        <div class="row">
									        	<div class="col-md-6">
									        		<p>网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。</p>
									        	</div>
									        	<div class="col-md-6">
									        		<img src="images/sm4.jpg" alt="" width="100%" height="100%" />
									        	</div>
									        </div>
									      </div>
									      <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
									      </div>
									    </div><!-- /.modal-content -->
									  </div><!-- /.modal-dialog -->
									</div><!-- /.modal -->
        						</div>
        					</div>
        				</div>
        			</div>
        		</div>
        	</div>
        </section>
		<!-- 前端项目经验 -->
		<section id="WebProject">
			<div class="container">
				<div class="row">
					<h3 class="text-center">我的web开发经验</h3>
						<div class="col-md-4 web_right">
							<br>
							<p class="bigP">
								从平面到三维，从手机应用到软件界面，从人机交互到网络管理系统与标准操作从平面到三维，从手机应用到软件界面，
							</p>
							<p class="bigP">
								从平面到三维，从手，从人机交互到网络管理系统与标准操作从平面到三维，从手机应用到软件界面，
							</p>
							<br>
							<p class="bigP">
								从平面到三维，从手机应用到软件界面，从人机交互到网络管理系统与标准操作流程，甚至家具和装修至家具我的人生。
							</p>
							<hr/>
							<p class="smallP">
								从平面到三维，从手机应用到软件界面，从人机理系统与标准操作流程，管理系统与标准操作流程，管理系统与标准操作流程，管理系统与标准操作修至家具和装修……当然，还有我的人生。
							</p>
						</div>
					<div class="col-md-8 my_swiper">
<!-- 					<div class="col-md-6 web_left">
							<div class="web">
								<div class="float float1">
									<p>这是描述1</p>
								</div>
								<img src="images/sm1.jpg" alt="">
							</div>
							<div class="web">
								<div class="float float2">
									<p>这是描述2</p>
								</div>
								<img src="images/sm2.jpg" alt="">
							</div>
							<div class="web">
								<div class="float float3">
									<p>这是描述2</p>
								</div>
								<img src="images/sm3.jpg" alt="">
							</div>
							<div class="web">
								<div class="float float4">
									<p>这是描述2</p>
								</div>
								<img src="images/sm4.jpg" alt="">
							</div>
						</div>
 -->
						  <!-- Swiper -->
						  <div class="swiper-container">
						    <div class="swiper-wrapper">
						      <div class="swiper-slide" style="background-image:url('images/sm1.jpg')"></div>
						      <div class="swiper-slide" style="background-image:url('images/sm1.jpg')"></div>
						      <div class="swiper-slide" style="background-image:url('images/sm1.jpg')"></div>
						      <div class="swiper-slide" style="background-image:url('images/sm1.jpg')"></div>
						      <div class="swiper-slide" style="background-image:url('images/sm1.jpg')"></div>
						      <div class="swiper-slide" style="background-image:url('images/sm1.jpg')"></div>
						      <div class="swiper-slide" style="background-image:url('images/sm1.jpg')"></div>
						    </div>
						    <!-- Add Pagination -->
						    <div class="swiper-pagination"></div>
						  </div>
					</div>
				</div>
			</div>
		</section>
		<!-- 发表过的文章 -->
		 <section id="about" class="about animated fadeIn">
        	<div class="container">
        		<h3 class="text-center">我发表过的文章</h3>
        		<!-- <p class="text-center">如有错误，欢迎指正。</p> -->
        		<div class="space"></div>
        		<div class="row">
        			<div class="col-sm-6">
	    				<ul class="list-group">
						  <li class="list-group-item">CSS实现宽度自适应宽高16:9的矩形</li>
						  <li class="list-group-item">CSS实现宽度自适应宽高16:9的矩形</li>
						  <li class="list-group-item">CSS实现宽度自适应宽高16:9的矩形</li>
						  <li class="list-group-item">CSS实现宽度自适应宽高16:9的矩形</li>
						  <li class="list-group-item">CSS实现宽度自适应宽高16:9的矩形</li>
						</ul>
	    			</div>
	    			<div class="col-sm-6">
	    				<ul class="list-group">
						  <li class="list-group-item">JS 生成一个目录树结构（递归）</li>
						  <li class="list-group-item">JS 生成一个目录树结构（递归）</li>
						  <li class="list-group-item">JS 生成一个目录树结构（递归）</li>
						  <li class="list-group-item">JS 生成一个目录树结构（递归）</li>
						  <li class="list-group-item">JS 生成一个目录树结构（递归）</li>
						</ul>
	    			</div>
        		</div>
        		
        	</div>
        </section>
		<!-- 各大平台 -->
		<section id="platform">
			<h3 class="text-center">你可以在以下各大平台找到我</h3>
			<div class="container">
				<div class="row">
					<div class="col-xs-1 col-xs-offset-3">
						<a href="#"><i class="fa fa-facebook"></i></a>
					</div>
					<div class="col-xs-1">
						<a href="#"><i class="fa fa-twitter"></i></a>
					</div>
					<div class="col-xs-1">
						<a href="#"><i class="fa fa-google-plus"></i></a>
					</div>
					<div class="col-xs-1">
						<a href="#"><i class="fa fa-skype"></i></a>
					</div>
					<div class="col-xs-1">
						<a href="#"><i class="fa fa-flickr"></i></a>
					</div>
					<div class="col-xs-1">
						<a href="#"><i class="fa fa-pinterest"></i></a>
					</div>
				</div>
				
			</div>
		</section>
		<!-- 留言板 -->
		<section id="contact" class="contact">
   			<div class="container">
   				<div class="space"></div>
   				<div class="space"></div>
   				<h3 class="text-center">交个朋友吧</h3>
   				<div class="space"></div>
   				<div class="row">
   					<div class="col-sm-6">
   						<p>
   							联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧联系我吧
   						</p>
   						<ul class="list-icons">
   							<li><i class="fa fa-map-marker pr-10"></i>广东省湛江市赤坎区寸金路29号岭南师范学院</li>
   							<li><i class="fa fa-phone pr-10"></i>400-100-100</li>
   							<li><i class="fa fa-fax pr-10"></i>15016488888</li>
   							<li><i class="fa fa-envelope pr-10"></i>946017153@qq.com</li>
   						</ul>
   						<ul class="links clearfix">
   							<a href="#"><li class="facebook"><i class="fa fa-facebook"></i></li></a>
   							<a href="#"><li class="twitter"><i class="fa fa-twitter"></i></li></a>
   							<a href="#"><li class="googleplus"><i class="fa fa-google-plus"></i></li></a>
   							<a href="#"><li class="skype"><i class="fa fa-skype"></i></li></a>
   							<a href="#"><li class="flickr"><i class="fa fa-flickr"></i></li></a>
   							<a href="#"><li class="pinterest"><i class="fa fa-pinterest"></i></li></a>
   						</ul>
   					</div>
   					<div class="col-sm-6">
   						<form action="" method="post">
   							<div class="form-group has-feedback">
							  <label class="control-label sr-only" for="Name">Name</label>
							  <input type="text" class="form-control" placeholder="Name" id="Name">
							  <span class="fa fa-user form-control-feedback" aria-hidden="true"></span>
							</div>

							<div class="form-group has-feedback">
							  <label class="control-label sr-only" for="Email">Email</label>
							  <input type="text" class="form-control" placeholder="Enter email" id="Email">
							  <span class="fa fa-envelope-o form-control-feedback" aria-hidden="true"></span>
							</div>

							<div class="form-group has-feedback">
							  <label class="control-label sr-only" >Message</label>
							  <textarea class="form-control" placeholder="Message" rows="8"></textarea>
							  <span class="fa fa-pencil form-control-feedback" aria-hidden="true"></span>
							</div>

							<input type="text" class="btn btn-default" value="Send" />
   						</form>
   					</div>
   				</div>
   			</div>
   		</section>
   		<footer>
   			<div class="container">
   				<div class="row">
   					<div class="col-md-12">
   						<p class="text-center">
   							Copyright © 2018 Shaw by Muke.
   						</p>
   					</div>
   				</div>
   			</div>
   		</footer>

		<!-- jquery JS -->
		<script src = 'js/jquery.min.js'></script>
		<!-- bootstrap JS -->
		<script src = 'bootstrap-3.3.7/dist/js/bootstrap.min.js'></script>
		<!-- 背景移动 JS -->
		<script type="text/javascript" src="js/packed_jquery.min6301986802.js"></script>
		<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="js/move_bg.js"></script>
		<!-- index JS -->
		<script SRC="js/index.js"></script>
		<!-- swiper JS -->
		<script src="js/swiper.min.js"></script>
	</body>
</html>